<template>
  <transition name="fade">
    <div class="wrap">
      <div class="select_class_wrap">
        <div class="class1_wrap">
          <ul>
            <li @click="select_class1" :data-id1="item.pid" v-for="(item , index) in class1_data"
                :class="item.pid==class1?'active':''">{{item.names}}
            </li>
          </ul>
        </div>
        <div class="class2_wrap">
          <ul ref="class2_scroll">
            <li @click="select_class2" :data-id2="item.cid" v-for="(item , index) in class2_data "
                :class="item.cid==class2?'active':''">{{item.classnames}}
            </li>
          </ul>
        </div>
        <div class="class3_wrap">
          <ul ref="class3_scroll">
            <li @click="select_class3" :data-id3="item.catId" v-for="(item , index) in class3_data"
                :class="item.catId==class3?'active':''">{{item.catName}}
            </li>
          </ul>
        </div>
        <div class="brand_wrap">
          <b>品牌： </b>
          <ul ref="brand_scroll">
            <li @click="select_brand" :data-id3="item.bid" v-for="(item , index) in brand_data"
                :class="item.bid==brand?'active':''">{{item.names}}
            </li>
          </ul>
        </div>
        <div class="spec_wrap">
          <b>规格： </b>
          <ul ref="spec_scroll">
            <li @click="select_spec" :data-id3="item.sid" v-for="(item , index) in spec_data"
                :class="item.sid==spec?'active':''">{{item.size}}
            </li>
          </ul>
        </div>
      </div>
      <div class="item_wrap">
        <item-list :data="items_data" @selectItem="selectItem"></item-list>
        <p v-if="!is_more" style="margin-top: 15px; color: #999">没有更多了...</p>
        <p v-if="isloading" style="margin-top: 15px; color: #999">加载中...</p>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import * as recommend from 'api/recommend'
  import {getOffsetLeft,w_scroll_top} from 'assets/dom/dom'
  import {get_items_list} from 'api/allclass'
  import itemList from 'components/item_list'

  export default {
    name: 'allClass',
    data() {
      return {
        class1: "",
        class2: "",
        class3: 0,
        brand: 0,
        spec: 0,
        class1_data: [],
        class2_data: [],
        class3_data: [],
        brand_data: [],
        spec_data: [],
        items_data: [],
        is_more: true,
        page: 1,
        isloading: false
      }
    },
    props: [],
    created() {
      this.brand_window_scroll()
      recommend.get_class_list({}).then((res) => {
        if (res.status === 200) {
          let _res = res.data
          if (_res.resStatus === 0) {
            const {class1, class2, class3} = this.$route.query
            this.class1_data = _res.data
            if (class1) {
              let isclass1 = false
              for (let i = 0; i < this.class1_data.length; i++) {
                if (this.class1_data[i].pid == class1) {
                  isclass1 = true
                  this.class1 = class1
                  this.class2_data = this.class1_data[i].class
                  this.class3_data = this.class1_data[i].class[0].catsList
                  this.class2 = this.class1_data[i].class[0].cid
                  this.class3 = this.class1_data[i].class[0].catsList[0].catId
                  break;
                }
                isclass1 = false
              }
              if (!isclass1) {
                this.no_class()
              }
              this.get_items()
            } else if (class2) {
              let isclass2 = false;
              baiju:for (let i = 0; i < this.class1_data.length; i++) {
                for (let a = 0; a < this.class1_data[i].class.length; a++) {
                  if (this.class1_data[i].class[a].cid == class2) {
                    isclass2 = true
                    this.class1 = this.class1_data[i].pid
                    this.class2 = class2
                    this.class2_data = this.class1_data[i].class
                    this.class3_data = this.class1_data[i].class[a].catsList
                    this.class3 = this.class1_data[i].class[a].catsList[0].catId
                    setTimeout(() => {
                      const left_ = document.querySelector("li[data-id2='" + class2 + "']").offsetLeft
                      this.$refs.class2_scroll.scrollLeft = left_
                    }, 20)
                    break baiju;
                  }
                  isclass2 = false
                }
              }
              if (!isclass2) {
                this.no_class()
              }
              this.get_items()
            } else if (class3) {
              let isclass3 = false
              baiji:for (let i = 0; i < this.class1_data.length; i++) {
                for (let a = 0; a < this.class1_data[i].class.length; a++) {
                  for (let b = 0; b < this.class1_data[i].class[a].catsList.length; b++) {
                    if (this.class1_data[i].class[a].catsList[b].catId == class3) {
                      isclass3 = true
                      this.class3 = class3
                      this.class1 = this.class1_data[i].pid
                      this.class2 = this.class1_data[i].class[a].cid
                      this.class2_data = this.class1_data[i].class
                      this.class3_data = this.class1_data[i].class[a].catsList

                      setTimeout(() => {
                        const left_ = document.querySelector("li[data-id2='" + this.class2 + "']").offsetLeft
                        this.$refs.class2_scroll.scrollLeft = left_
                      }, 20)
                      setTimeout(() => {
                        const left_ = document.querySelector("li[data-id3='" + class3 + "']").offsetLeft
                        this.$refs.class3_scroll.scrollLeft = left_
                      }, 20)

                      break baiji
                    }
                    isclass3 = false
                  }
                }
              }
              if (!isclass3) {
                this.no_class()
              }
              this.get_items()
            } else {
              this.no_class()
              this.get_items()
            }
          }
        }
      })
    },
    mounted() {

    },
    computed: {},
    methods: {
      select_class1(e) {
        if(!this.isloading){
          this.page = 1
          this.is_more = true
          w_scroll_top(0)
          const id = e.target.getAttribute("data-id1")
          this.$refs.class2_scroll.scrollLeft = 0
          this.$refs.class3_scroll.scrollLeft = 0
          this.$refs.brand_scroll.scrollLeft = 0
          this.$refs.spec_scroll.scrollLeft = 0
          for (let i = 0; i < this.class1_data.length; i++) {
            if (this.class1_data[i].pid == id) {
              this.class1 = id
              this.class2_data = this.class1_data[i].class
              this.class3_data = this.class1_data[i].class[0].catsList
              this.class2 = this.class1_data[i].class[0].cid
              this.class3 = this.class1_data[i].class[0].catsList[0].catId
              this.brand = 0
              this.spec = 0
              break
            }
          }
          this.get_items()
        }
      },
      select_class2(e) {
        if(!this.isloading){
          this.page = 1
          this.is_more = true
          const id = e.target.getAttribute("data-id2")
          clearInterval(this.interval)
          this.$refs.class3_scroll.scrollLeft = 0
          this.$refs.brand_scroll.scrollLeft = 0
          this.$refs.spec_scroll.scrollLeft = 0
          for (let i = 0; i < this.class1_data.length; i++) {
            for (let a = 0; a < this.class1_data[i].class.length; a++) {
              if (id == this.class1_data[i].class[a].cid) {
                this.class2 = id
                this.class3_data = this.class1_data[i].class[a].catsList
                this.class3 = this.class1_data[i].class[a].catsList[0].catId
                this.brand = 0
                this.spec = 0
                break
              }
            }
          }
          this.scroll_center_interval(e.target, this.$refs.class2_scroll)
          this.get_items()
        }

      },
      select_class3(e) {
        if(!this.isloading){
          this.page = 1
          this.is_more = true
          clearInterval(this.interval)
          this.$refs.brand_scroll.scrollLeft = 0
          this.$refs.spec_scroll.scrollLeft = 0
          const id_ = e.target.getAttribute("data-id3");
          this.class3 = id_;
          this.brand = 0
          this.spec = 0
          this.scroll_center_interval(e.target, this.$refs.class3_scroll)
          this.get_items()
        }

      },
      select_brand(e) {
        if(!this.isloading){
          this.page = 1
          this.is_more = true
          clearInterval(this.interval)
          this.$refs.spec_scroll.scrollLeft = 0
          const id_ = e.target.getAttribute("data-id3");
          this.brand = id_;
          this.spec = 0
          this.scroll_center_interval(e.target, this.$refs.brand_scroll)
          this.get_items()
        }

      },
      select_spec(e) {
        if(!this.isloading){
          this.page = 1
          this.is_more = true
          clearInterval(this.interval)
          const id_ = e.target.getAttribute("data-id3");
          this.spec = id_;
          this.scroll_center_interval(e.target, this.$refs.spec_scroll)
          this.get_items()
        }

      },
      selectItem(id) {
        this.$emit('setkeep', "detial")
        this.$router.push({
          path: '/detial',
          query: {
            itemId: id
          }
        })
      },
      scroll_center_interval(c_element, p_element) {
        const time = 200;
        const num = 20;
        const scroll_left = ((c_element.offsetLeft - p_element.scrollLeft) + c_element.offsetWidth / 2) - document.documentElement.offsetWidth / 2
        const target_left = p_element.scrollLeft + scroll_left
        let ulWidth =  p_element.scrollWidth;
        this.interval = setInterval(() => {
          const now_left = p_element.scrollLeft
          if (scroll_left >= 0 && (now_left >= target_left || (ulWidth - p_element.offsetWidth) <= now_left)) {
            clearInterval(this.interval)
            return;
          }
          if (scroll_left < 0 && (now_left <= target_left || (now_left === 0))) {
            clearInterval(this.interval)
            return;
          }
          p_element.scrollLeft = scroll_left > 0 ? Math.ceil(now_left + (scroll_left / num)) : Math.floor(now_left + (scroll_left / num))

        }, time / num)
      },
      brand_window_scroll() {
        this.$parent.scroll_name = () => {
          if ((document.body.clientHeight - document.documentElement.clientHeight <= w_scroll_top() + 320) && !this.isloading) {
            if (this.$route.path === "/allClass" && this.items_data.length && this.is_more) {
              this.isloading = true
              this.get_items(true)
            }
          }
        }
        window.removeEventListener("scroll", this.$parent.scroll_name)
        window.addEventListener("scroll", this.$parent.scroll_name)

      },
      get_items(more) {
        if(!more){
          this.items_data=[];
          this.isloading = true
        }
        get_items_list({
          cid: this.class2,
          catId: this.class3,
          bid: this.brand,
          sid: this.spec,
          page: this.page
        }).then((res) => {
          if (res.status === 200) {
            const _res = res.data
            if (_res.resStatus === 0) {
              this.isloading = false
              if (more) {
                this.items_data = this.items_data.concat(_res.data.list)
              } else {
                this.items_data = _res.data.list
              }
              if (!this.brand) {
                this.brand_data = _res.data.brand
              }
              if (!this.spec) {
                this.spec_data = _res.data.specs
              }
              this.is_more = _res.data.isMore
              if (this.is_more) {
                this.page++
              }
            }
          }
        });
      },
      no_class(){
        this.class1 = this.class1_data[0].pid
        this.class2_data = this.class1_data[0].class
        this.class3_data = this.class1_data[0].class[0].catsList
        this.class2 = this.class1_data[0].class[0].cid
        this.class3 = this.class1_data[0].class[0].catsList[0].catId
      }
    },
    components: {
      itemList
    }
  }
</script>

<style scoped lang="scss">
  .wrap {
    padding-bottom: 2px;
    margin-top: 125px;
  }

  .select_class_wrap {
    text-align: left;
    margin-top: 6px;
    font-size: 14px;
    background-color: #fbfbfb;
    padding-bottom: 8px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 98%;
    margin-left: 1%;
    box-shadow: 1px 1px 1px 1px #777;
  }

  .active {
    background-color: #2096d4;
    border-radius: 4px;
    color: #fff;
  }

  .class1_wrap {
    text-align: center;
    position: fixed;
    width: 100%;
    left: 0;
    min-width: 320px;
    margin-top: -33px;
    z-index: 1;
    > ul {
      -webkit-overflow-scrolling: touch;
      border-bottom: 1px solid #eee;
      padding-bottom: 2px;
      overflow: hidden;
      background: #fdfdfd;
      max-width: 768px;
      margin: 0 auto;
      > li {
        float: left;
        width: 16.66%;
        height: 30px;
        line-height: 30px;
      }
    }
  }

  .class2_wrap {
    margin-top: 5px;
    overflow: hidden;
    height: 30px;
    > ul {
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      white-space: nowrap;
      padding-bottom: 35px;
      > li {
        text-align: center;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }

  .class3_wrap {
    margin-top: 5px;
    overflow: hidden;
    height: 30px;
    > ul {
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      white-space: nowrap;
      padding-bottom: 35px;
      > li {
        text-align: center;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }

  .brand_wrap {
    margin-top: 5px;
    overflow: hidden;
    height: 30px;
    > b {
      float: left;
      height: 30px;
      line-height: 30px;
      margin-left: 11px;
      font-weight: bold;
    }
    > ul {
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      white-space: nowrap;
      padding-bottom: 35px;
      > li {
        text-align: center;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }

  .spec_wrap {
    margin-top: 5px;
    overflow: hidden;
    height: 30px;
    > b {
      float: left;
      height: 30px;
      line-height: 30px;
      margin-left: 11px;
      font-weight: bold;
    }
    > ul {
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      white-space: nowrap;
      padding-bottom: 35px;
      > li {
        text-align: center;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }

  .fade-enter-active /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
    transform: translateX(100%);
  }

  .fade-enter-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 1;
    transform: translateX(0);
    transition: all .3s;
  }
</style>
